<template>
  <el-tag class="ml-2" type="success">{{ vite }}</el-tag>
  <el-button type="danger" @click="chekAutoImport">AutoImport</el-button>
  <!-- <img src="@/icons/火热.svg" alt=""> -->
  <img :src="Vue" />
  <el-button type="warning" @click="button = !button">{{ button ? '这是真的' : '这是假的' }}</el-button>
  <one-child ref="oneChild1" :post="post"></one-child>
  <el-divider />
  <div>这个button使用Unocss</div>
  <el-button class="bg-blue-400 hover:bg-red-600 m-4">Unocss</el-button>
  <button bg="pink-600 hover:red-600 " border="1 solid blue-200">属性预设</button>
  <el-button class="btn-primary">@apply指令</el-button>
</template>

<script setup>
import { bus } from "@/utils/mitt.js";
const post = ref({
  info: "props"
});
const title = ref("provide/inject");
const name = ref("bus");
provide(/*注入名*/ "sendTitle", /*值*/ title);
const symbolId = Symbol();
provide(symbolId, title);
onMounted(() => {
  bus.emit("titleByBus", name);
});
onBeforeUnmount(() => {
  bus.all.clear();
});

const oneChild1 = ref();
const button = ref(true);
const vite = ref("AutoImport是否生效");
const chekAutoImport = () => {
  oneChild1.value.open();
  vite.value = "AutoImport生效了";
  console.log(oneChild1);
  // ElMessage({
  //   message: `${vite.value}\ngood good good!`,
  //   type: "success"
  // });
};
</script>

<style scoped lang="scss">
.btn-primary {
  @apply bg-yellow-200 text-sm text-white;
  @apply hover:bg-red-600; // 冒号后面不能有空格
  @apply m-4
}
</style>
